<template>
  <view class="pages">
    <editor id="editor" class="ql-container" :read-only="readOnly" @ready="onEditorReady" placeholder="请输入"></editor>
    <view class="botton">
      <button class="botton-botton" v-if="!readOnly" @click="savehtml">保存</button>
      <button class="botton-botton" @click="readOnly=!readOnly" v-if="readOnly">编辑</button>
    </view>
  </view>
</template>

<script>
let option = {}
export default {
  data() {
    return {
      readOnly: true,
      editorCtx: '',
    }
  },
  onLoad(options) {
    option = options
  },
  methods: {
    onEditorReady() {
      const that = this;
      const query = uni.createSelectorQuery().in(this);
      query
        .select('#editor')
        .context(data => {
          that.editorCtx = data.context;
          that.editorCtx.setContents({
            html: option.customerQustions,
            success: function () {
            }
          });
        })
        .exec();
    },
    savehtml() {
      let _this = this;
      _this.editorCtx.getContents({
        success: function (res) {
          option.customerQustions = res.html;
          _this.$post('/sale/wx/customer/update_data', { ...option }, true).then(res => {
            if (res.code * 1 === 200) {
              uni.showToast({
                title: '添加成功',
                icon: 'none'
              })
              _this.readOnly = true
            }
          })
        }
      });
    },
  }
}
</script>
<style lang="scss" scope>
.pages {
  padding: 10px 3vw;
}
.ql-container {
  height: auto;
  background: #f2f2f2;
  padding: 10px;
  border-radius: 4px;
}
.botton {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  &-botton {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80rpx;
    border-radius: 20px;
    width: 70vw;
    color: #fff;
    background: #ed7467;
  }
}
</style>
